<template>
	<view class="page">
		<!-- 搜索栏 -->
		<view class="search-header">
			<view class="search-input-box">
				<image class="search-icon" src="/static/svg/search.svg"></image>
				<input class="search-input" type="text" placeholder="搜索爆款产品..." confirm-type="search" />
			</view>
			<view class="cancel-btn" @click="goBack">取消</view>
		</view>

		<!-- 热门搜索 -->
		<view class="search-section">
			<view class="section-title">热门搜索</view>
			<view class="tag-container">
				<view class="tag-item" v-for="(item, index) in hotSearchList" :key="index" @click="onTagClick(item)">
					{{ item.word }}
				</view>
			</view>
		</view>

		<!-- 历史记录 -->
		<view class="search-section history-section">
			<view class="section-header">
				<view class="section-title">历史记录</view>
				<image class="delete-icon" src="/static/svg/delete.svg" @click="clearHistory"></image>
			</view>
			<view class="tag-container">
				<view class="tag-item" v-for="(item, index) in historyList" :key="index" @click="onTagClick(item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {useShowList} from "../../common/data";


const {listData:hotSearchList}=useShowList("hot_word_list",{})
// 热门搜索列表

// 历史记录列表
const historyList = ref(['面膜', '美妆', '洗衣液', '洁面', '大牌箱包', '面部护理', '零食']);

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 点击标签
const onTagClick = (keyword) => {
	console.log('搜索关键词:', keyword);
	uni.navigateTo({
		url: '/pages/index/search-product?keyword=' + keyword.word
	});
	// 这里可以实现搜索逻辑或跳转到搜索结果页
};

// 清空历史记录
const clearHistory = () => {
	historyList.value = [];
};
</script>

<style>
	.page {
		width: 100vw;
		padding: 0 20rpx;
		background-color: #fff;
	}

	/* 搜索头部 */
	.search-header {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}

	.search-input-box {
		flex: 1;
		height: 72rpx;
		background-color: #F5F5F5;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 72rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	/* 搜索区域 */
	.search-section {
		margin-top: 30rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.delete-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 标签容器 */
	.tag-container {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		padding: 12rpx 30rpx;
		background-color: #F5F5F5;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #333;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 历史记录区域 */
	.history-section {
		margin-top: 40rpx;
	}
</style>
